<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生修改</title>
    <link rel="stylesheet" type="text/css" href="/static/js/layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="/static/js/layui-v2.5.7/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/myJs.js"></script>


</head>
<body>

<a href="SelectStudent" class="layui-btn layui-btn-radius layui-btn-primary">
    <i class="layui-icon">&#xe65a;</i>
</a>
<div class="layui-container">
    <div class="layui-row">

        <form action="UpdateStudent" method="post" class="layui-form">

            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="hidden" name="id" id="Id" value="{$UpdateData.id}" class="layui-input" required>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="name_id">学生名字</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name_id" class="layui-input"
                           placeholder="请输入学生名字" required>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="password_id">学生密码</label>
                <div class="layui-input-inline">
                    <input type="text" name="password" id="password_id"
                           class="layui-input"
                           placeholder="请输入学生密码" required>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label" for="age_id">学生年龄</label>
                <div class="layui-input-inline">
                    <input type="number" name="age" id="age_id" class="layui-input"
                           placeholder="请输入学生年龄" required>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">学生班级</label>
                <div class="layui-input-inline">
                    <select name="cls_id" id="cls_id">


                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">学生性别</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="男" class="layui-input" title="男" required>
                    <input type="radio" name="sex" value="女" class="layui-input" title="女" required>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">科目</label>
                <div class="layui-input-block">
                    <div id="check">

                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="create_time_id">时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="create_time" id="create_time_id" class="layui-input" placeholder="请输入时间"
                           required>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" onclick="UpSudent();" class="layui-btn">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
    </div>
</div>


<script type="text/javascript">

    $(function () {
        layui.use(['form', 'laydate'], function () {
            var form = layui.form;
            window.laydate = layui.laydate;

            Classes(form);
            Course(form);


            $.ajax({
                dataType: "json",
                type: "GET",
                async: false,
                url: "/studentLayer/Student/UpdateStudent",
                data: {"id": $("#Id").val()},
                success: function (ajax) {

                    //时间控件
                    datetime(ajax);

                    $("#name_id").val(ajax.data.name);
                    $("#password_id").val(ajax.data.password);
                    $("#age_id").val(ajax.data.age);
                    $("#cls_id").val(ajax.data.cls_id);

                    $('input[name=sex]').each(function () {
                        if (this.value == ajax.data.sex) {
                            this.checked = true;
                        }
                    });

                    console.log(ajax)
                    $.each(ajax.data.c_id, function (index, value) {
                        $("input[name='c_id[" + value + "]']").attr("checked", "true");
                    })

                    form.render("radio");
                    form.render("checkbox");
                    form.render("select");
                }
            })

        })
    })


    function datetime(ajax) {

        window.laydate.render({
            elem: '#create_time_id',
            type:'datetime',
            value:ajax.data.create_time,
            theme: '#393D49',
            calendar: true

        });

    }


    function UpSudent() {

        var c_id = new Array();
        $("#check>input:checked").each(function (value, element) {
            c_id.push(element.value);
        })

        $.ajax({
            dataType: "json",
            type: "POST",

            url: "/studentLayer/Student/UpdateStudent",
            data: {
                "id": $("#Id").val(),
                "name":$("#name_id").val(),
                "password": $("#password_id").val(),
                "age": $("#age_id").val(),
                "cls_id": $("#cls_id>option:selected").val(),
                "sex": $("input[name=sex]:checked").val(),
                "c_id": c_id,
                "create_time": $("#create_time_id").val()
            },

            success: function (ajax) {
                if (ajax.code == 0) {
                    layer.msg(ajax.msg, function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.location.reload(index);
                        parent.layer.close(index);
                        window.location.href = "/studentLayer/Student/SelectStudent";
                    });
                } else {
                    layer.msg(ajax.msg, function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.location.reload(index);
                        parent.layer.close(index);
                        window.location.href = "/studentLayer/Student/SelectStudent";
                    });
                }
            }

        })
        

    }





    function Course(form) {
        $.ajax({
            dataType: "json",
            ataType: "json",
            type: "POST",
            async: false,
            url: "/studentLayer/Student/course",
            success: function (ajax) {
                var html = '';
                ajax.data.forEach(function (value, index) {
                    html = html
                        + '   <input type="checkbox" ' +
                        'name="c_id[' + value.id + ']" value="' + value.id + '" title="' + value.name + '" class="layui-input">'
                })

                $("#check").html(html);
                form.render("checkbox");
            }

        })
    }

    function Classes(form) {
        $.ajax({
            dataType: "json",
            async: false,
            type: "POST",
            url: "/studentLayer/Student/Classes",
            success: function (ajax) {
                var html = "<option></option>";
                ajax.data.forEach(function (value, index) {
                    html = html
                        + '<option value="' + value.id + '">' + value.name + '</option>'
                })

                $("#cls_id").html(html);
                form.render("select");
            }

        })

    }


</script>

</body>
</html>